<template>
  <div>
    <!-- 表格 -->
    <el-table
      :data="areaList.records"
      style="width: 100%"
      text-align="center"
      height="180"
       highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      :header-cell-style="{ fontSize: '15px', color: 'rgb(83, 79, 79)' }"
      border
    >
      <el-table-column fixed prop="areaName" label="区域名称">
      </el-table-column>
      <el-table-column prop="areaSeed" label="林种">
      </el-table-column>
      <el-table-column prop="areaType" label="地类">
      </el-table-column>
      <el-table-column prop="areaEx" label="优势树种" >
      </el-table-column>
      <el-table-column prop="classList.className" label="负责小班">
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="areaList.pages * 10"
      @click="get()"
      @current-change="handleChange"
      style="margin-left: 100px; margin-bottom: 100px"
    >
    </el-pagination>


     <!-- 添加新区域 -->
    <div style="text-align: left">
      <el-button
        type="info"
        @click="dialogFormVisible = true"
        style="
          width: 100px;
          margin-right: 30px;
          margin-left: 70px;
          border: 1px solid rgb(164, 171, 171);
          color: rgb(83, 79, 79);
          font-weight: bold;
          font-size: 13px;
        "
        size="small"
        plain
        >添加区域</el-button
      >
      <el-dialog
        title="添加区域"
        :visible.sync="dialogFormVisible"
        width="60%"
        custom-class="customClass"
      >
        <div style="" class="msg">
          <div>
            <p style="margin: 50px 30px">
              名称：<input type="text" v-model="areaName" />
            </p>
            <p style="margin: 50px 30px">
              林种：<input type="text" v-model="areaSeed" />
            </p>
            <p style="margin: 50px 30px">
              优势树种：<input type="text" v-model="areaEx"/>
            </p>
            <p style="margin: 50px 30px">
              地类：<select v-model="areaType">
                <option selected>林地</option>
                <option>疏林地</option>
                <option>灌木地</option>
                <option>苗圃地</option>
              </select>
            </p>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addArea()">确 定</el-button>
        </div>
      </el-dialog>


      <!-- 模糊查询 -->
      <session>
        <div>
          <fieldset style="width: 200px">
            <legend>查询区域信息</legend>
            <form action="" style="width: 260px;height:170px">
                区&nbsp;域&nbsp;名&nbsp;称
              <input type="text" v-model="areaName" style="margin-top: 20px"/><br>
                林&nbsp;种
               <input type="text" v-model="areaSeed" style="margin-top: 20px"/><br>
                负&nbsp;责&nbsp;小&nbsp;班
               <input type="text" v-model="className" style="margin-top: 20px"/><br>
              <br />
              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin-left: 140px"
              />
            </form>
          </fieldset>
        </div>
      </session>

    </div>

  </div>
</template>

<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  data(){
    return{
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: "70px",
      areaId:"",
      areaName:"",
      areaSeed:"",
      areaType:"",
      areaEx:"",
      className:"",
      pageNo:"",
      pages:"",
      list:[]
    }
  },
  computed:{
    ...mapState("area",["areaList","areaParam"])
  },
  methods:{
    ...mapActions("area",["findAllArea"]),
    ...mapMutations("area",["setAreaParam"]),
    ...mapActions("area",["findAreaName"]),
     async addArea(){
       let parmaObj = {
        areaName: this.areaName,
        areaSeed: this.areaSeed,
        areaType: this.areaType,
        areaEx: this.areaEx,
      };
      let info = await this.ajax.getSubmit("/api/area/addArea", parmaObj);
      console.log(info);
      if (info != null) {
        alert("添加成功！");
      } else {
        alert("不能为空！");
      }
      this.dialogFormVisible = false;
      this.findAllArea();
     },
    get() {
      let paramObj = this.areaParam;
      paramObj.areaName = this.areaName;
      paramObj.areaSeed = this.areaSeed;
      paramObj.areaName = this.areaName;
      // 把最新的信息装入 store中的 param对象中
      this.setAreaParam(paramObj);
      this.findAreaName()
    },
     handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    cut(pageNo) {
      let paramObj = this.areaParam;
      paramObj.pageNo = pageNo;
      this.setAreaParam(paramObj);
      this.findAllArea();
    },
    handleTableRow(row) {
      console.log(row.areaId);
      this.areaId = row.areaId;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
  },
  created(){
    this.findAllArea()
    console.log(this.areaList.records)
  }

}
</script>

<style>
div > div > session:first-child {
  position: relative;
}
div > div > session:first-child > div:first-child {
  position: absolute;
  left: 400px;
  bottom: -75px;
}
</style>